import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaNewScroll } from 'ecCom';

@inject('portalThemeStore')
@observer
class E9TopMenuContent extends React.Component {
  constructor(props) {
    super(props);
    this.onTopMenuClick = this.onTopMenuClick.bind(this);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { topMenuObj = {}, translatepage } = portalThemeStore;
    const { topMenu = [], topMenuSelected = {} } = topMenuObj;
    const { id: selectedId } = topMenuSelected;

    return (
      <div className="e9header-top-menu-content">
        <WeaNewScroll ecId={`${(this && this.props && this.props.ecId) || ''}_WeaNewScroll@6pg4wr`} height="100%">
          <div className="e9header-top-menu-items">
            {topMenu.map((item, index) => {
              if (item && item.id != '0') {
                const { id, name, fname, icon, iconType, iconImgSrc } = item;
                const selectedClassName = id == selectedId ? 'e9header-top-menu-selected' : '';

                return (
                  <div
                    key={index}
                    data-id={id}
                    className={`e9header-top-menu-item e9header-top-menu-color${Math.abs(parseInt(id, 10)) & 7} ${selectedClassName}`}
                    title={fname}
                    onClick={() => this.onTopMenuClick(item)}
                  >
                    <div className="e9header-top-menu-item-cover">
                      <div className="e9header-top-menu-item-icon">
                        {iconType == '2' && iconImgSrc ? (
                          <img src={iconImgSrc} alt="" width="30px" height="30px" />
                        ) : icon ? (
                          <i className={icon} style={{ fontSize: '30px' }} />
                        ) : (
                          <i className={`wevicon-top-menu-default wevicon-top-menu-${id}`} />
                        )}
                      </div>
                      <div className="e9header-top-menu-item-name">{translatepage == '1' ? fname : name}</div>
                    </div>
                  </div>
                );
              }
              return <div />;
            })}
          </div>
        </WeaNewScroll>
      </div>
    );
  }

  onTopMenuClick(topMenuSelected) {
    this.props.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onTopMenuSelectedChange(topMenuSelected);
  }
}

export default E9TopMenuContent;
